<template>
    <div class="todo-footer">
        <label>
                    <input
                        type="checkbox"
                        
                        v-on:change="handleSelectAllTodos"
                    />
                </label>
                <span><span>已完成1件</span> / 总计11件</span>
                <button
                    class="btn btn-warning"
                    v-on:click="handleDelCheckedTodo"
                >
                    清除已完成任务
                </button>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup() {},
    methods:{
        handleSelectAllTodos(){

        },
        handleDelCheckedTodo(){

        }
    }
})
</script>

<style scoped>

.btn{
	display: inline-block;  /* 如果是button默认就是这样 */
	padding: 8px 10px; margin-bottom: 0; font-size: 14px;
	line-height: 20px; text-align: center;vertical-align: middle;
	cursor: pointer;border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-warning{
	color: #fff; background-color: orange;border: none;
}
.btn-warning:hover{
	color: #fff;background-color: red;
}
.btn:focus{
	outline: none;
}


/*footer*/
.todo-footer {
  height: 40px;line-height: 40px; padding-left: 6px; margin-top: 5px;
}

.todo-footer label {
  display: inline-block; margin-right: 20px; cursor: pointer;
}

.todo-footer label input {
  position: relative; top: -1px; vertical-align: middle;
}

.todo-footer button {
  float: right; margin-top: 5px;
}

</style>
